<template>
  <div class="w-[100%]" style="height: calc(100% - 50px)">
    <a-card class="w-[100%] text-2xl py-1">
      您好，{{ sysStore.user?.username }}，祝您生活愉快!
    </a-card>

    <!-- 快捷工具入口 -->
    <a-card class="w-[100%] mt-3" title="快捷工具">
      <div class="flex gap-4">
        <a-button type="primary" size="large" @click="goToExcelDesigner">
          Excel模板设计器
        </a-button>
        <a-button size="large" @click="goToReports"> 报表管理 </a-button>
      </div>
    </a-card>
    <div class="w-[100%] flex justify-between mt-3">
      <a-card class="w-[50%] mr-2" title="更新日志">
        <a-collapse :bordered="false">
          <a-collapse-item key="1.0.0" header="V 1.0.0">
            <template #extra> 2024-11-01 </template>
            <div>架构上的重大改变或者其他重大改变，修改第一位版本号</div>
            <div>版本迭代，修改第二个版本号</div>
            <div>bug修复、小修改，修改第三个版本号</div>
          </a-collapse-item>
        </a-collapse>
      </a-card>
      <a-card class="w-[50%] ml-2" title="系统公告">
        <a-table
          :bordered="false"
          :columns="datatable.columns"
          :data="datatable.records"
          :loading="datatable.loading"
          :pagination="false"
          :show-header="false"
          class="w-[100%]"
          table-layout-fixed
        >
          <!-- 公告标题 -->
          <template #noticeTitle="{ record }">
            <a-link icon @click="detailBtnClick(record.noticeId)">{{
              record.noticeTitle
            }}</a-link>
          </template>
        </a-table>
        <pagination
          v-if="datatable.total > 0"
          v-model:page-num="searchForm.pageNum"
          v-model:page-size="searchForm.pageSize"
          :total="datatable.total"
          class="mt-5"
          @pagination="getPageNoticeList()"
        />
      </a-card>

      <!-- 公告详情 -->
      <a-modal
        v-model:visible="noticeModal.visible"
        :footer="false"
        draggable
        simple
        width="1080px"
      >
        <a-spin
          :loading="spinLoading"
          :size="35"
          class="w-[100%]"
          tip="正在处理, 请稍候..."
        >
          <div class="flex justify-center text-2xl">
            {{ noticeModal.noticeData.noticeTitle }}
          </div>
          <div class="flex justify-center mt-5">
            发布时间：{{ noticeModal.noticeData.publishTime }}
          </div>
          <div class="flex mt-5">
            <div v-html="noticeModal.noticeData.noticeContent"></div>
          </div>
        </a-spin>
      </a-modal>
    </div>
  </div>
</template>
<script setup>
import {
  getNoticeByNoticeIdApi,
  getPageHomeNoticeListApi,
} from "~/api/basic/notice.js";
import { reactive, ref } from "vue";
import { useSysStore } from "~/store/module/sys-store.js";
import { useRouter } from "vue-router";

//路由
const router = useRouter();

//缓存
const sysStore = useSysStore();
//搜索参数表单
const searchForm = reactive({
  //页码
  pageNum: 1,
  //条数
  pageSize: 10,
});
//数据列表
const datatable = reactive({
  //列配置
  columns: [
    {
      title: "公告标题",
      dataIndex: "noticeTitle",
      slotName: "noticeTitle",
      align: "left",
      ellipsis: true,
      tooltip: true,
    },
    {
      title: "发布时间",
      dataIndex: "publishTime",
      align: "center",
      width: 170,
    },
  ],
  //加载
  loading: false,
  //数据列表
  records: [],
  //总条数
  total: 0,
});
//查询数据列表
const getPageNoticeList = () => {
  datatable.loading = true;
  getPageHomeNoticeListApi(searchForm)
    .then((res) => {
      datatable.records = res.records;
      datatable.total = res.total;
    })
    .finally(() => {
      datatable.loading = false;
    });
};
//公共模态框
const noticeModal = reactive({
  //显示/隐藏
  visible: false,
  //公告数据
  noticeData: {},
});
//加载中...
const spinLoading = ref(false);
//加载公告详情
const detailBtnClick = (noticeId) => {
  //加载公告数据
  spinLoading.value = true;
  getNoticeByNoticeIdApi(noticeId)
    .then((res) => {
      //数据赋值
      if (res) {
        //如果是外链，打开新页面跳转
        if (res.noticeOutChain && res.noticeLink) {
          window.open(res.noticeLink, "_blank");
        } else {
          //显示模态框
          noticeModal.visible = true;
          //数据赋值
          noticeModal.noticeData = res;
        }
      }
    })
    .finally(() => {
      spinLoading.value = false;
    });
};
//导航到Excel设计器演示页面
const goToExcelDesigner = () => {
  router.push("/excel/demo");
};

//导航到报表管理
const goToReports = () => {
  // 这里可以添加报表管理页面的路由
  console.log("导航到报表管理");
};

//查询数据列表
getPageNoticeList();
</script>
